<template>
	<view>
		<view class="search" :style="{'background': background}">
			<image class="search-img" src="../../static/img/scan.png" mode="scaleToFill"
				v-if="placeholder=='追溯扫码' || placeholder=='扫码退厂' ||  placeholder=='拆零扫码'"></image>
			<view class="iconfont search-icon" v-else>
				&#xe64f;
			</view>
			<input class="input" type="text" ref="myInput" :focus="isFocus" v-model="inputValue"				
				:confirm-type="confirmType" :placeholder="placeholder" placeholder-class="input-placeholder"
				:auto-blur="false" @focus="setfocus" @blur="blur" @input="input" @confirm="confirm" />
			<!-- @focus="focus" @blur="blur" -->
			<view class="search-right" @tap="handleSearchRight()" v-if="isRight">
				<text>{{rightText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { setTimeout} from 'timers';
	let main;
	let receiver;
	let filter;
	export default {
		name: "search-input",
		props: {
			background: {
				type: String,
				default () {
					return '#FFFFFF'
				}
			},
			placeholder: {
				type: String,
				default () {
					return '请输入关键字进行搜索'
				}
			},
			rightText: {
				type: String,
				default () {
					return '清除'
				}
			},
			confirmType: { // send | search | next | go | done
				type: String,
				default () {
					return 'done'
				}
			},
			isRight: { // 是否显示右边文字
				type: Boolean,
				default () {
					return false
				}
			},
			isHideKeyboard: { // 是否隐藏键盘
				type: Boolean,
				default () {
					return true
				}
			},
			isAndoirdReceiver: { // 是否接收android广播
				type: Boolean,
				default () {
					return false
				}
			}
		},
		// watch: {
		// 	isFocus: (newVal) => {
		// 		if (newVal) {
		// 			uni.hideKeyboard()
		// 		}
		// 	}
		// },
		created() {
			if (this.isAndoirdReceiver) {
				this.initScan()
			}


		},
		destroyed() {
			if (this.isAndoirdReceiver) {
				this.stopScan()
			}
		},
		data() {
			return {
				isFocus: false,
				inputValue: '',
			};
		},
		methods: {
			setfocus() {
				var that = this;
				setTimeout(function(){					
					that.isFocus = true;		
					if (that.isHideKeyboard)
					{
						that.hideKeyboard()
					}					
				},150)
			},
			blur() {
				this.hideKeyboard()
			},
			input(e) {
				this.inputValue = e.detail.value
			},
			confirm(e) {				
				this.inputValue = e.detail.value
				const result = {
					value: this.inputValue
				}

				this.$emit('searchConfirm', result)
			},
			handleSearchRight() {
				this.cleanInput();
				// const result = {
				// 	value: ''
				// }
				this.$emit('searchRight')
			},
			/**
			 * 清除输入参数
			 */
			cleanInput() {	
				setTimeout(() => {
					this.inputValue = '';
				}, 100)
				
				this.inputFoucs()

			},
			inputFoucs() {
				uni.hideKeyboard()
				this.isFocus = false
				setTimeout(() => {
					this.isFocus = true
					this.hideKeyboard()
				}, 150)
			},  
			hideKeyboard() {
				var interval = setInterval(function() {
					uni.hideKeyboard(); //隐藏软键盘		
				}, 500);
				setTimeout(() => {
					clearInterval(interval);
				}, 1000);
			},

			setInputValue(value) {
				this.inputValue = value;
			},
			initScan() {
				// #ifdef APP-PLUS
				main = plus.android.runtimeMainActivity(); //获取activity
				const IntentFilter = plus.android.importClass('android.content.IntentFilter');
				filter = new IntentFilter();
				filter.addAction('android.intent.ACTION_SCAN_OUTPUT'); // 换你的广播动作
				receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
					onReceive: function(context, intent) {
						plus.android.importClass(intent);
						const code = intent.getStringExtra('data'); // 换你的广播标签
						this.inputValue = code
						const result = {
							value: this.inputValue
						}
						this.$emit('searchConfirm', result)
						// console.log('扫描code: ', code);
					}
				});
				this.startScan();
				// #endif
			},
			startScan() {
				// #ifdef APP-PLUS
				main.registerReceiver(receiver, filter);
				// #endif
			},
			stopScan() {
				// #ifdef APP-PLUS
				main.unregisterReceiver(receiver);
				// #endif
			},
		}
	}
</script>

<style>
	.search {
		display: flex;
		flex-direction: row;
		height: 90rpx;
		background: #F2F2F2;
		border-radius: 16rpx;
		margin: 0 32rpx;
	}

	.search-icon {
		font-size: 40rpx;
		margin: auto 26rpx auto 32rpx;
	}

	.search-img {
		width: 32rpx;
		height: 32rpx;
		margin: auto 26rpx auto 20rpx;
	}

	.input {
		flex: 1;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
		font-weight: 600;
		margin: auto 26rpx auto 0;
	}

	.input-placeholder {
		color: #999999;
	}

	.search-right {
		font-size: 40rpx;
		line-height: 44rpx;
		color: var(--btn-color);
		margin: auto 26rpx auto 0;
	}
</style>